<template>
  <div class="activity-href">
    <l-r-content-index>
      <template #side-content>
        <LeftTree
            ref="LeftTreeRef"
            :treeData="treeData"
            :show-little-point="false"
            :disableSelect="false"
            @getTreeNodeId="clickTreeNode"
        ></LeftTree>
      </template>

      <div class="content">
        <search-bar>
          <template #normal>
            <el-form-item label="活动名称">
              <el-input
                  v-model="form.name"
                  clearable
                  placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动状态">
              <el-select
                  v-model="form.status"
                  class="m-2"
                  placeholder="请选择"
              >
                <el-option v-for="item in statusList" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </template>
        </search-bar>

        <div class="list">
          <div class="card" :class="{
            'card-active': checkActive(item),
            'card-selected': item.id === selectedCard?.id
          }" v-for="item in list" @click="clickCard(item)">
            <div class="img-wrapper">
              <img class="img" :src="item.coverUrl"/>
            </div>
            <div class="text">
              <el-popover
                  placement="top"
                  :width="200"
                  trigger="hover"
                  :content="item.name"
              >
                <template #reference>
                  <div class="line name">{{ item.name }}</div>
                </template>
              </el-popover>
              <div class="line status">
                {{ getStatusLabel(item.status) }}
              </div>
              <div class="line time">
                开始：{{ formatTime(item.startTime) }}
              </div>
              <div class="line time">
                结束：{{ formatTime(item.endTime) }}
              </div>
              <div class="line remark" v-if="item.remark">
                备注：{{item.remark}}
              </div>
            </div>
          </div>
        </div>

        <div class="pager">
          <el-pagination
              v-model:current-page="page.currentPage"
              layout="total, prev, pager, next"
              :page-size="page.showCount"
              :total="total"
          />
        </div>
      </div>
    </l-r-content-index>
  </div>
</template>

<script setup lang="ts">
// 获取左侧的树结构
import {activityPageApi, queryQuestionGroupTreeApi} from "@/api/activity";
import {debounce} from "@/utils";
import moment from "moment";
import {ILink} from "@/components/hrefSelector/types";
import {Ref} from "vue";

const props = defineProps<{
  modelValue: ILink;
}>()

const emits = defineEmits<{
  (e: "click", value: any): void
}>()

const treeData = ref([] as any)
const getCate = async () => {
  let rs = await queryQuestionGroupTreeApi({
    scene: "ACTIVITY",
  });
  if (rs.code === 200) {
    treeData.value = [
      {
        id: "",
        name: "全部",
        children: [],
      },
    ].concat(rs.payload);
  }
};

const page = reactive({
  currentPage: 1,
  showCount: 12,
})

const total:Ref<number> = ref(0);

const form = reactive({
  name: "",
  status: "",
  groupId: "",
})
const list = ref([])
const getList = async () => {
  const rs = await activityPageApi({...form, ...page})

  if (rs.code === 200) {
    list.value = rs.payload ?? []
    total.value = rs.page?.totalResult ?? 0;
  }
}

const debouncedSearch = debounce(() => {
  console.log("debounce search")
  page.currentPage = 1;
  getList()
}, 700, false)

watch(() => form, debouncedSearch, {
  deep: true
})

watch(() => page, () => {
  console.log("page watch")
  getList()
}, {
  deep: true
})


const clickTreeNode = (node: any, data: any) => {
  form.groupId = node.id;
}

const statusList = [{
  label: "全部",
  value: "",
  cardLabel: "",
}, {
  label: "上线",
  value: "2",
  cardLabel: "已上线"
}, {
  label: "预上线",
  value: "1",
  cardLabel: "预上线"
}, {
  label: "下线",
  value: "0",
  cardLabel: "已下线"
}]

const getStatusLabel = (value: number) => {
  return statusList.find(item => item.value === value.toString())?.cardLabel ?? ""
}

const selectedCard = ref();
const clickCard = (item:any) => {
  selectedCard.value = item
  emits("click", item);
}

const checkActive = (item:any) => {
  return item.name === props.modelValue.urlName && (item.actLink === props.modelValue.url || item.canonicalActLink === props.modelValue.url)
}

const formatTime = (value: number) => {
  return value ? moment(value).format("YYYY.MM.DD") : ""
}

onMounted(() => {
  getCate();
  getList();
})

</script>

<style scoped lang="scss">
@use "../styles/index.scss";
.card {
  display: flex;
  align-items: flex-start;
  width: 190px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  padding: 10px;

  .img-wrapper {
    .img {
      max-width: 50px;
      max-height: 100px;
    }
  }

  .text {
    flex: 1;
    margin-left: 10px;

    .line {
    }

    .name {
      width: 130px;
      word-break: keep-all;
      white-space: nowrap;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }

    .status {
      background: var(--el-color-primary);
      color: white;
      display: inline-block;
      padding: 1px 5px;
      border-radius: 4px;
      margin-bottom: 5px;
    }

    .remark {
      width: 120px;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -moz-box;
      -moz-box-orient: vertical;
      -moz-line-clamp: 2;
      margin-top: 5px;
      color: #999;
    }
  }
}



.card:hover {
  background: #EEE;
}
</style>
